<template>
  <div class="">
    <button @click="addButton">add btn</button>
    <div v-for="item in list" :key="item.name">
      <input type="text" v-model="item.name" />
      <span>{{ item.value }}</span>
      <button @click="modifyData(item)">修改数据</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      count: 0,
      list: [
        { name: "aaa", value: 111 },
        { name: "bbb", value: 222 },
        { name: "ccc", value: 333 },
      ],
    };
  },
  mounted() {},
  beforeUpdate() {},
  updated() {},
  computed: {},
  watch: {},
  methods: {
    addButton() {
      var obj = {
        name: "",
        value: 666,
      };
      this.count++;
      obj.name = "aaa" + this.count;
      this.list.push(obj);
    },
    modifyData(item) {
      console.log({item});
    },
  },
};
</script>
<style scoped></style>
